<script setup lang="ts">
import type { Page, UserVo } from '@/type/User'
import { userListApi } from '@/api/user-api'
import type { ResultData } from '@/api/service'
import defaultAvatar from '@/assets/default-avatar.jpg'
import SList from '@/components/common/list/SList.vue'
import { useList } from '@/composables/list-composable'
import { useRouter } from 'vue-router'
import SelectPremList from '@/views/perm/SelectPremList.vue'
import { ref } from 'vue'
import SelectRoleList from '@/views/role/SelectRoleList.vue'

const viewId = 'UserList'
const { tableData, pageQuery, statement, total, tableLoading, search } = useList(viewId, getData, () => {})
const router = useRouter()

const roleListDialog = ref<boolean>(false)
const roleListTitle =  ref<string>('用户: 角色')
const userInfoId =  ref<string>()

function getData() {
  tableLoading.value = true
  userListApi(pageQuery).then((response: ResultData<Page<UserVo[]>>) => {
    total.value = response.data.total
    tableData.value = response.data.modelList
    tableLoading.value = false
  })
}


function close() {
  roleListDialog.value = false
}

const methods = {
  add: () => {
    router.push({ path: '/user/info' })
  },
  edit: (row: UserVo) => {
    router.push({ path: '/user/info', query: { userId: row.userId } })
  },
  userRole: (item: UserVo) => {
    roleListTitle.value = `[${item.nickname}]：角色信息`
    userInfoId.value = item.userId
    roleListDialog.value = true
  }
}

</script>

<template>
  <s-list
    :statement="statement"
    :data="tableData"
    :methods="methods"
    :total="total"
    :table-loading="tableLoading"
    :page-size="pageQuery.pageSize"
    @search="search"
  >
    <template #tb-avatar="scope">
      <el-avatar size="default" :src="scope.row.avatar == '' ? defaultAvatar : scope.row.avatar" />
    </template>
  </s-list>

  <el-dialog
    destroy-on-close
    :close-on-click-modal="false"
    v-model="roleListDialog"
    :title="roleListTitle"
    width="1000"
  >
    <select-role-list :close="close" :user-id="userInfoId!!"/>
  </el-dialog>
</template>

<style scoped></style>
